<template>
  <!--选项和选项配置-->
  <div class="w-100">

    <el-divider>选项</el-divider>
    <el-form-item label="选项ref">
      <el-input v-model="optionsData.optionsRef" clearable/>
    </el-form-item>
    <el-radio-group v-model="optionsData.source" class="mb-2">
      <el-radio-button value="static">静态数据</el-radio-button>
      <el-radio-button value="dynamic">动态数据</el-radio-button>
    </el-radio-group>
    <div v-show="optionsData.source==='static'">
      <object-array-editor :names="objectEditorName"
                           v-model="optionsData.static[optionsData.name]"
                           v-if="optionsData.static.tag==='options-editor'"></object-array-editor>
      <tree-editor v-model="optionsData.static[optionsData.name]" :props-config="optionsData.propsConfig" v-else/>
    </div>
    <div v-show="optionsData.source==='dynamic'">
      <el-form-item label="网址">
        <el-input v-model="optionsData.dynamic.url" placeholder="网址">
        </el-input>
      </el-form-item>
      <el-form-item label="方法">
        <el-select v-model="optionsData.dynamic.method" placeholder="方法">
          <el-option label="get" value="get"></el-option>
          <el-option label="post" value="post"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据位置">
        <el-input v-model="optionsData.dynamic.dataKey" placeholder="数据位置">
          <!--          @change="changeRenderKey()-->
        </el-input>
      </el-form-item>
    </div>
    <el-divider>选项配置</el-divider>
    <el-form-item label="配置ref">
      <el-input v-model="optionsData.propsRef" clearable/>
    </el-form-item>
    <el-form-item :label="k.label" v-for="k in optionsData.propsConfig" style="width: 100%" :title="k.label">
      <el-input v-model="k.value" @input="propsInput"></el-input>
    </el-form-item>
  </div>
</template>

<script setup>
import ObjectArrayEditor from "@/components/editors/ObjectArrayEditor.vue";
import TreeEditor from "@/components/editors/TreeEditor.vue";

const props = defineProps({
  optionsData: {
    type: Object,
    required: true
  }
});

const objectEditorName = computed(() => {
  return props.optionsData.propsConfig.map(v => {
    return {
      name: v.value,
      label: v.label,
      tag: v.tag,
    }

  });
})

const childrenValue = computed(() => {
  let res = "children";
  props.optionsData.propsConfig.forEach(v => {
    if (v.name === "children") {
      res = v.value;
    }
  })
  return res;
})

function changeKeys(list, oldKey, newKey) {
  // console.info("changeKeys", oldKey, newKey, JSON.stringify(list))
  if (oldKey === newKey || newKey === '' || oldKey === '') {
    return;
  }
  for (const l of list) {
    l[newKey] = l[oldKey];
    if (l[childrenValue.value]) {
      changeKeys(l[childrenValue.value], oldKey, newKey);
    }
    delete l[oldKey]
  }
}


let oldValues = []
onMounted(() => {
  oldValues = props.optionsData.propsConfig.map(v => v.value)
})

//当props更改时，可以修改options对应的object key
function propsInput() {
  const valueSet = new Set();
  let validInput = true;
  props.optionsData.propsConfig.forEach(v => {
    if (valueSet.has(v.value) || v.value === "" || !v.value) {
      validInput = false;
      return true;
    } else {
      valueSet.add(v.value)
    }
  });
  if (!validInput) {
    props.optionsData.propsConfig.forEach((v, idx) => {
      v.value = oldValues[idx];
    });
    return;
  }
  let newVals = props.optionsData.propsConfig.map(v => v.value)
  newVals.map((val, idx) => {
    if (val !== oldValues[idx]) {
      changeKeys(props.optionsData.static [props.optionsData.name], oldValues[idx], val)
    }
  })
  oldValues = newVals;
}
</script>


<style scoped lang="scss">

</style>